<div class="modal" ng-controller="SaveModelCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2>{{'MODEL.SAVE.TITLE' | translate}}</h2>
            </div>
            <div class="modal-body">
                <div ng-if="saveDialog.errorMessage && saveDialog.errorMessage.length > 0" class="alert error"
                     style="font-size: 14px; margin-top:20px">
                    <div class="popup-error" style="font-size: 14px">
                        <span class="glyphicon glyphicon-remove-circle"></span>
                        <span>{{saveDialog.errorMessage}}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="nameField">{{'MODEL.NAME' | translate}}</label>
                    <input type="text"
                           ng-disabled="status.loading || (error && error.conflictResolveAction == 'saveAs')"
                           id="nameField"
                           class="form-control"
                           ng-model="saveDialog.name"
                           auto-focus/>
                </div>
                <div class="form-group">
                    <label for="keyField">{{'MODEL.KEY' | translate}}</label>
                    <input type="text"
                           ng-disabled="status.loading || (error && error.conflictResolveAction == 'saveAs')"
                           id="keyField"
                           class="form-control"
                           ng-model="saveDialog.key"/>
                </div>
                <div class="form-group">
                    <label for="docTextArea">{{'MODEL.DESCRIPTION' | translate}}</label>
                    <textarea id="docTextArea" ng-disabled="status.loading" class="form-control"
                              ng-model="saveDialog.description"></textarea>
                </div>
                <div class="checkbox" ng-show="!error && !error.isConflict">
                    <label>
                        <input type="checkbox" ng-disabled="status.loading" ng-model="saveDialog.newVersion">
                        {{'MODEL.SAVE.NEWVERSION' | translate}}
                    </label>
                </div>
                <div class="form-group" ng-if="saveDialog.newVersion">
                    <label for="commentTextArea">{{'MODEL.SAVE.COMMENT' | translate}}</label>
                    <textarea id="commentTextArea" class="form-control" ng-model="saveDialog.comment"
                              ng-disabled="status.loading"></textarea>
                </div>

                <div ng-if="saveDialog.validationErrors" class="alert error" style="font-size: 14px; margin-top:20px">

                    <div class="popup-error" style="font-size: 14px">
                        <span class="glyphicon glyphicon-remove-circle"></span>
                        <span>{{'MODEL.VALIDATIONERRORS' | translate:error}}</span>
                    </div>
                </div>

                <div ng-if="error && error.isConflict && !status.loading" class="alert error"
                     style="font-size: 14px; margin-top:20px">

                    <div class="popup-error" style="font-size: 14px">
                        <span class="glyphicon glyphicon-remove-circle"></span>
                        <span>{{'MODEL.CONFLICT.WRITE' | translate:error}}</span>
                    </div>

                    <div>

                        <div style="font-size: 14px; margin-bottom: 10px">{{'MODEL.CONFLICT.WRITE.OPTIONS' |
                            translate}}
                        </div>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-danger"
                                   ng-click="error.conflictResolveAction = 'overwrite'">
                                <input type="radio" name="options" id="option1">
                                {{'MODEL.CONFLICT.WRITE.OPTION.OVERWRITE' | translate}}
                            </label>
                            <label class="btn btn-danger"
                                   ng-click="error.conflictResolveAction = 'discardChanges'">
                                <input type="radio" name="options" id="option2">
                                {{'MODEL.CONFLICT.WRITE.OPTION.DISCARDCHANGES' | translate}}
                            </label>
                            <label class="btn btn-danger"
                                   ng-click="error.conflictResolveAction = 'saveAs'">
                                <input type="radio" name="options" id="option3"
                                       ng-disabled="account.type != 'enterprise'">
                                {{'MODEL.CONFLICT.WRITE.OPTION.SAVEAS' | translate}}
                            </label>
                            <label class="btn btn-danger"
                                   ng-click="error.conflictResolveAction = 'newVersion'">
                                <input type="radio" name="options" id="optio43">
                                {{'MODEL.CONFLICT.WRITE.OPTION.NEWVERSION' | translate}}
                            </label>
                        </div>

                        <div ng-if="error.conflictResolveAction == 'saveAs'" style="margin-top: 10px">
                            <span>{{'MODEL.CONFLICT.SAVEAS' | translate}}</span>
                            <input type="text" ng-model="error.saveAs" style="width: 300px" auto-focus>
                        </div>
                    </div>

                </div>

            </div>
            <div class="modal-footer">

                <div class="pull-right">
                    <button type="button" class="btn" ng-click="close()" ng-disabled="status.loading" translate>
                        ACTION.CANCEL
                    </button>
                    <button class="btn btn-primary" ng-click="saveAndClose()"
                            ng-disabled="status.loading || saveDialog.name.length == 0 || saveDialog.key.length == 0"
                            ng-show="!error && !error.isConflict" translate>ACTION.SAVE-AND-CLOSE
                    </button>
                    <button class="btn btn-primary" ng-click="save()"
                            ng-disabled="status.loading || saveDialog.name.length == 0 || saveDialog.key.length == 0"
                            ng-show="!error && !error.isConflict" translate>ACTION.SAVE
                    </button>
                    <button class="btn btn-primary" ng-click="okClicked()" ng-disabled="isOkButtonDisabled()"
                            ng-show="error && error.isConflict" translate>ACTION.OK
                    </button>
                </div>

                <div class="pull-right popup-error" ng-if="error && !error.isConflict">
                    <span>{{'MODEL.SAVE.ERROR' | translate}}</span>
                </div>

                <loading></loading>

            </div>
        </div>
    </div>